<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- Metas -->
	    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta name="author" content="Vision" />
	    <!-- Links -->
	    <link rel="icon" type="image/png" href="images/favicon.png" />
	    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,600&display=swap" rel="stylesheet">
	    <link rel="stylesheet" href="icofont.min.css">
	    <link href="css/bootstrap.min.css" rel="stylesheet" />
	    <link href="css/slick.css" rel="stylesheet" />
	    
	    <link href="css/main.css" rel="stylesheet" />
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css"/>
	</head>
	<body>
		
		<header id="home">
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light ">
        <!-- Change Logo Img Here -->
        <a class="navbar-brand" href="#"><img src="images/logo.svg" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <div class="interactive-menu-button">
            <a href="#">
              <span>Menu</span>
            </a>
          </div>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <!-- Nav Link -->
              <a class="nav-link" data-scroll href="index.html">主页.<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <!-- Nav Link -->
              <a class="nav-link" data-scroll href="food.html">食品.</a>
            </li>
            <li class="nav-item">
              <!-- Nav Link -->
              <a class="nav-link" data-scroll href="batch.html">批次.</a>
            </li>
            <li class="nav-item">
              <!-- Nav Link -->
              <a class="nav-link active" data-scroll href="user.html">人员管理.</a>
            </li>
            <li class="nav-item">
              <!-- Nav Link -->
              <a class="nav-link" data-scroll href="about.html">关于我们.</a>
            </li>
			<li class="nav-item">
			  <!-- Nav Link -->
			  <a class="nav-link" data-scroll href="log.html">日志.</a>
			</li>
            <!-- <li class="nav-item dropdown">
             
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">EN</a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">DE </a>
                <a class="dropdown-item" href="#">ES </a>
              </div>
            </li> -->
          </ul>
          <a data-scroll href="my.html" class="contact-btn form-inline my-2 my-lg-0">
            <!-- Contacgt Us Button -->
            <button>个人信息</button>
          </a>
        </div>
      </nav>
    </div>
    </header>
		
		<script type="text/html" id="toolbarDemo">
		  <div class="layui-btn-container">
		    <button class="layui-btn layui-btn-sm" lay-event="add"  style = "margin-top:10px;margin-left:30px;position:relative;float:left;">添加</button>
		  </div>
		</script>
		<table class="layui-hide" id="users" lay-filter="users"></table>
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<!--添加用户-->
		<div class="layui-fluid" id="addUser" style="display:none;">
		    <div class="layui-card">
				<div class="layui-card-body" style="padding: 15px;">
					<form class="layui-form" id="userForm" action="" lay-filter="component-form-group">
						<div class="layui-form-item">
						  <label class="layui-form-label">姓名</label>
						  <div class="layui-input-block">
						    <input type="text" name="name" lay-verify="required|name" autocomplete="off" class="layui-input">
						  </div>
						</div>
						<div class="layui-form-item">
						  <label class="layui-form-label">手机号</label>
						  <div class="layui-input-block">
						    <input type="text" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
						  </div>
						</div>
						<div class="layui-form-item">
						  <label class="layui-form-label">密码</label>
						  <div class="layui-input-block">
						    <input type="text" name="password" lay-verify="required|password" autocomplete="off" class="layui-input">
						  </div>
						</div>
						
						<div class="layui-form-item">
						  <label class="layui-form-label">单选框</label>
						  <div class="layui-input-block">
						    <input type="radio" name="gender" value="男" title="男" checked="">
						    <input type="radio" name="gender" value="女" title="女">
						  </div>
						</div>
						<div class="layui-form-item">
						  <label class="layui-form-label">年龄</label>
						  <div class="layui-input-block">
						    <input type="number" name="age" lay-verify="required|age" autocomplete="off" class="layui-input">
						  </div>
						</div>
						<div class="layui-form-item">
						  <label class="layui-form-label">职位</label>
						  <div class="layui-input-block">
						    <input type="text" name="position" lay-verify="required|position" autocomplete="off" class="layui-input">
						  </div>
						</div>
						<div class="layui-form-item">
						  <label class="layui-form-label">证件编号</label>
						  <div class="layui-input-block">
						    <input type="text" name="certificates" lay-verify="required|certificates" autocomplete="off" class="layui-input">
						  </div>
						</div>
						
						<div class="layui-form-item">
						    <label class="layui-form-label">用户类型</label>
						    <div class="layui-input-block">
						      <select name="type" lay-filter="type">
						        
						        <option value="">普管</option>
						        <option value="root" selected="">超管</option>
						        
						      </select>
						    </div>
						  </div>
						
						
						</div>
						
						
					</form>
				</div>
			</div>
	</body>
	<script src="layui/layui.js"></script>
	<script>
		layui.use(['layer','table'],function(){
			var layer = layui.layer
			,$ = layui.$
			,table = layui.table
			
			
			table.render({
			    elem: '#users'
			    ,url:'http://localhost:8080/foodman/admin/findAdminByConditions'
				,method:'POST'
				,cellMinWidth:120
				,toolbar: '#toolbarDemo'//添加按钮
			    ,cols: [[
			      {field:'id', title:'用户ID',  align:'center', sort: true}
			      ,{field:'name', title:'姓名',align:'center'}
				  ,{field:'phone', title:'联系方式',align:'center'}
			      ,{field:'gender', title:'性别'}
			      ,{field:'age', title:'年龄',  sort: true}
			      ,{field:'position', title:'职位'}
				  ,{field:'certificates', title:'证件编号'}
				  ,{field:'type', title:'用户类型'}
				  ,{field:'registertime', title:'注册时间'}
				  ,{field:'referrer', title:'注册人ID'}
				  ,{title:'操作', toolbar: '#barDemo'}
			    ]]
			    ,page: true
			  });//列表渲染结束
			
			table.on('toolbar(users)', function(obj){
				if(obj.event === 'add'){
				  layer.open({
					type: 1,
					title: '添加用户',
					area:  ['80%', '85%'],
					skin: 'layui-layer-molv',
					content: $('#addUser'),
					btn: ['添加', '取消'],
					yes: function (index, layero) {
						var form=document.querySelector("#userForm");
						var formdata=new FormData(form);
						$.ajax({
							url: 'http://localhost:8080/foodman/admin/addAdmin',
							type: 'POST',
							async: false,
							xhrFields: {withCredentials: true},
							crossDomain: true,
							processData: false, 
							contentType: false, 
							data: formdata,
							success: function (info) {
							  if(200 === info.code){
								layer.msg(info.msg)
								setTimeout(function(){
									location.reload()
								},800);
							  } else {
								layer.msg(info.msg)
							  }
							}
						});
					}
				  })
				} else{
				  layer.msg('未开放')
				}
			});
			
			//监听删除用户的事件
			table.on('tool(users)', function(obj){
			    var data = obj.data 
			    ,layEvent = obj.event; 
			    if(layEvent === 'del'){
			      layer.confirm('确认删除么', function(index){
			        obj.del(); //删除对应行（tr）的DOM结构
			        layer.close(index);
			        //向服务端发送删除指令
					$.ajax({
						url: 'http://localhost:8080/foodman/admin/delete?id='+data.id,
						type: 'GET',
						async: false,
						xhrFields: {withCredentials: true},
						crossDomain: true,
						processData: false, 
						contentType: false, 
						
						success: function (info) {
						  if(200 === info.code){
							layer.msg(info.msg)
							setTimeout(function(){
								location.reload()
							},800);
						  } else {
							layer.msg(info.msg)
						  }
						}
					});
					
			      });
			    } 
			  });//事件监听结束
		})
	</script>
</html>
